<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>

<h1>注册</h1>
<!--表单
    action：表单提交的位置，可以是网站，也可以是一个请求处理地址
    method:post,get提交方式
        get：我们可以在url中看到我们提交的信息，不安全，但高效，不可以传输大文件
        post：比较安全，可以传输大文件
-->
<form action="MainTag.html" method="post">
    <!--文本输入框：input type=“text”-->
    <!--文本输入框
        value="xcosmosbox" 默认初始值
        maxlength="8" 最大可输入长度
        size="30" 输入框的长度
    -->
    <p>名字: <input type="text" name="username" value="xcosmosbox" maxlength="8" size="30" placeholder="请输入用户名"></p>

    <!--密码框：input type=“password”-->
    <p>密码：<input type="password" name="password" required></p>

    <!--单选框标签
        input type="radio"
        value：单选框的值
        name：表示组，一个组内的选择只能选一个
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!--多选框
        input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">打游戏
    </p>


    <!--按钮
        input type="button"  普通按钮
        input type="image"   图片按钮
        input type="submit"  提交按钮
        input type="reset"   重置按钮
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击下载">
        <input type="image" src="resources/image/pic.png">
    </p>


    <!--下拉框，也叫列表框
        select 下拉框
        selected 默认选择
    -->
    <p>国家：
        <select name="列表名称" id="">
            <option value="选项的值" >中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">瑞士</option>
            <option value="选项的值" selected>日本</option>
        </select>
    </p>

    <!--文本域
         cols="30" rows="10"
    -->
    <p>反馈：
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

    <!--文件域
        input type="file"
        name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>


    <!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <!--URL验证-->
    <p>URL:
        <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>数字：
        <input type="number" name="number" max="100" min="0" step="10">
    </p>


    <!--滑块-->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="1">
    </p>


    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>


    <p>自定义邮箱：
        <input type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>
    

    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

</form>



</body>
</html>